<template>
  <div class="wrap">
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="">
      </div>
      <div class="other"  @click="gologin">
        進入登錄首頁
      </div>
    </div>
    <div class="main">
      <div class="login">
        <div class="login_parent">
          <div class="h3">忘記密碼</div>
          <div class="hello">重置密碼</div>
           <div class="tops">
            <div class="news">手機號碼*</div>
            <!-- <select name="">
              <option value="ZGSK+852">ZGSK+852</option>
              <option value="ZGSK+168">ZGSK+168</option>
            </select> -->
            <select name="" v-model="loginForm.sho_cate_name">
              <option value="">請選擇</option>
              <option v-for="(item,index) in list" :key="index" :value="item.area" :label='item.label'></option>
            </select>
            <div class="phoness">
              <input
                class="input-user"
                v-model="loginForm.mobile"
                placeholder="請輸入手機號碼"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">驗證碼*</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.identifyingCode"
                placeholder="請輸入短信驗證碼"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
         <div class="tops">
            <div class="news">密碼*</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.password"
                type="password"
                placeholder="請輸入密碼"
                maxlength="16"
                show-password
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">確認密碼*</div>
            <div class="phone">
             <input
                class="input-user"
                v-model="loginForm.passwords"
                placeholder="請再次輸入登錄密碼"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="submit">
            <div @click="getuser">重置密碼</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {resetPwd,getAreaCode} from '@/api/login';
export default {
  name: 'Login',
  data () {
    return {
      list:[],
      loginForm: {
        mobile:'',
        identifyingCode: '',
        password: '',
        passwords:'',
        sho_cate_name: '',
      },
    }
  },
  mounted(){
    this.getcourse()
  },
  methods: {
    getuser(){
      if(this.loginForm.passwords != this.loginForm.password){
        this.$message('兩次密碼輸入不壹致');
      }else{
        resetPwd({password:this.loginForm.password,identifyingCode:this.loginForm.identifyingCode,mobile:this.loginForm.mobile, userId: 0}).then(response => {
          if (response.errno == 0) {
            this.$router.replace({ path: '/login' })
          } else {
            this.$message({
                type: 'error',
                message: response.errmsg
            })
          }
      })
      .catch(failResponse => {})
      }   
    },
    getcourse(){
      getAreaCode({userId:0}).then(response => {
        if (response.errno == 0) {
          var array = []
          for(var i = 0;i<response.data.length;i++){
            response.data[i].label = response.data[i].area+'+'+response.data[i].code
            array.push(response.data[i])
          }
          this.list = array
        }
    })
        .catch(failResponse => {})
    },
    goforget(){
      this.$router.push({path:'/forget'})
    },
    gohome(){
      this.$router.push({path:'/home',query:{sta:1}})
    },
    goregist(){
      this.$router.push({path:'/regist'})
    },
    gologin(){
      this.$router.push({path:'/login'})
    }
  }
}
</script>
<style type="text/css" scoped>
.header{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin-top: 20px;
}
.wrap{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.logo img{
  width: 191px;
  height: 78px;
}
.other{
  cursor: pointer;
  font-size: 25px;
} 
.main { 
  width: 100%;
  background-color: #e9eef3;
  background-size: cover;
  background-image: url("../../assets/loginBimg.png");
}
.login{
  width: 100%;
  height: 1100px;
  display: flex;
  align-items: center;
}
.login_parent {
  position: absolute;
  right: 5%;
  width: 40%;
  background: #fff;
  color:rgba(0, 0, 0, 0.5);
  background-size: cover;
  border-radius: 15px;
}
 .h3{
    padding-top:60px;
    font-size: 40px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000;
  }
 .hello{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    padding-bottom:30px;
    height: 80px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #000;
  }
  .phone{
    width: 80%;
    display: block;
    padding:10px 20px;
    margin: 0 auto;
    color: #000;
    border:1px solid #000;
  }
  .input{
    background: none !important;
  }
  .phone div{
    font-size: 25px;
    padding-left:2px;
  }
  .phones{
    width: 30%;
    padding:10px 20px;
    height: 50px;
    color: #000;
    border:1px solid #000;
  }
  .new{
    display: flex;
    align-items: center;
    font-size: 25px;
    padding-left:2px;
    color: #000;
  }
  .phoness{
    width: 50%;
    padding:10px 20px;
    height: 50px;
    color: #000;
    border:1px solid #000;
  }
  .news{
    width: 20%;
    display: flex;
    align-items: center;
    font-size: 25px;
    padding-left:2px;
    color: #000;
  }
  .top{
    width: 86%;
    justify-content: space-between;
    display: flex;
    margin: 0 auto;
    margin-bottom:20px;
  }
  .tops{
    width: 86%;
    justify-content: space-between;
    display: flex;
    margin: 0 auto;
    margin-bottom:50px;
  }
  .input-user {
    width: 100%;
    border: none;
    margin: 0 auto;
    outline: none;
    color: #000;
    font-size: 18px;
    background: #fff !important;
    height: 50px;
    line-height: 50px;
  }
  .password{
    padding:20px 100px;
    margin: 0 auto;
    height: 80px;
    color: #000;
  }
  .input-password {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    border: none;
    outline: none;
    color: #000;
    font-size: 18px;
    border:1px solid #000;
    height: 50px;
  }
  .submit{
    width: 85%;
    height: 200px;
    align-items: center;
    margin: 0 auto;
    justify-content: space-around;
    display: flex;
  }
  .submit>div:nth-child(1){
    width: 80%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #BE9A67;
    color: #fff;
    border-radius:10px;
    cursor:pointer;
    font-size: 28px;
  }
  .forget{
    width: 80%;
    height: 40px;
    padding-top:30px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    font-size: 20px;
  }
  .top{
    display: flex;
  }
  .agree{
    font-size: 10px;
    color: #BE9A67;
  }
   select{
    border-right: none; 
    outline: none;
    width: 30%;
    font-size: 18px;
    text-align: center;
    padding-left:10px;
  }
</style>
